import { Table } from "antd";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import type { TableProps } from "antd";
import dayjs from "@/utils/dayjs";
import { TZ } from "@/utils/env";
import {
  changeParams,
  getListAsync,
} from "@/store/totalRetention/totalRetentionSlice";

type Ratio = { login_ratio: number, sub_day: number }
export interface DataType {
  uuid: string;
  c_time: number;
  channel: number;
  country: string;
  network: string;
  register: number;
  x_ratio: number;
  ratio_list: Ratio[]
}

export default function MTable() {
  const dispatch = useAppDispatch();
  const { params, table } = useAppSelector((state) => state.totalRetention);

  const {
    config: {
      data: {
        data: { user_channel_list = [] } = {},
      } = {},
    } = {},
  } = useAppSelector((state) => state.app);

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "时间",
      key: "c_time",
      dataIndex: "c_time",
      align: "center",
      render: (text) => dayjs.unix(text).tz(TZ).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "渠道",
      key: "channel",
      dataIndex: "channel",
      align: "center",
      render: (text) =>
        user_channel_list?.find?.((i) => i.value === text)?.label,
    },
    {
      title: "地区",
      key: "country",
      dataIndex: "country",
      align: "center",
    },
    {
      title: "子渠道",
      key: "network",
      dataIndex: "network",
      align: "center"
    },
    {
      title: "注册人数",
      key: "register",
      dataIndex: "register",
      align: "center",
    },
  ];

  const col: Ratio[] = []
  Array.isArray(table?.data?.data?.page_data) && table.data.data.page_data.forEach(record => {
    if (Array.isArray(record.ratio_list)) {
      record.ratio_list.forEach(item => {
        const findItem = col.find(i => i.sub_day === item.sub_day)
        if (!findItem) {
          col.push(item)
        }
      })
    }
  })

  col.sort((a,b) => a.sub_day - b.sub_day).forEach(item => {
    columns.push({
      title: `第${item.sub_day}天留存`,
      key: "ratio_list",
      dataIndex: "ratio_list",
      align: "center",
      render: text => `${(Number(text?.find?.((i:Ratio) => i.sub_day === item.sub_day)?.login_ratio || 0) * 100).toFixed(4)}%`
    })
  })

  return (
    <Table
      columns={columns}
      scroll={{ x: "max-content" }}
      bordered
      loading={table.status === "loading"}
      pagination={{
        total: table?.data?.data?.total,
        current: params?.page,
        pageSize: params?.page_size,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total: number, range: [number, number]): string =>
          `${range[0]}-${range[1]}条/共${total}条`,
        onChange: (page: number, pageSize: number): void => {
          dispatch(changeParams({ page, page_size: pageSize }));
          dispatch(
            getListAsync({
              ...params,
              page,
              page_size: pageSize,
            })
          );
        },
      }}
      dataSource={table?.data?.data?.page_data || []}
      size="small"
      rowKey="uuid"
    />
  );
}
